<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改医生信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css">
    <script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>
    <link rel="stylesheet" href="../../../layui/layuiAdmin/css/admin.css" media="all">
    <style>
        .st{
            width: 270px!important;
        }
        .layui-form-label{
            width: 120px!important;
        }
        .xinghao{
            color: red!important;
        }
    </style>
</head>
<body>

<!--表单-->
<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">
    <!--  用户ID  -->
        <div class="layui-form-item layui-hide">
            <div class="layui-input-inline st">
                <input type="text" name="doctorId" lay-verify="required" class="layui-input layui-hide">
            </div>
        </div>
    <!--  用户名  -->
    <div class="layui-form-item">
        <label class="layui-form-label">医生姓名<span class="xinghao">*</span></label>
        <div class="layui-input-inline st">
            <input type="text" name="doctorName" lay-verify="required|doctorName" placeholder="请输入医生姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">医生性别</label>
        <div class="layui-input-block">
            <input type="radio" name="doctorSex" value="1" title="男" checked="">
            <input type="radio" name="doctorSex" value="2" title="女">
        </div>
    </div>
    <!--  真实姓名  -->
    <div class="layui-form-item">
        <label class="layui-form-label">手机号码<span class="xinghao">*</span></label>
        <div class="layui-input-inline st">
            <input type="text" name="doctorPhone" lay-verify="required|doctorPhone" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--  手机号码  -->
    <div class="layui-form-item">
        <label class="layui-form-label">所属医院</label>
        <div class="layui-input-inline">
            <select name="hospitalId" id="hospitalSelect" lay-filter="">
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">账户状态</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="0" title="未开通" >
            <input type="radio" name="status" value="1" title="已开通" checked="">
            <input type="radio" name="status" value="2" title="停用">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-inline st">
            <input type="text" name="createTime" class="layui-input" id="datetimePicker">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">头像<span class="xinghao">*</span></label>
        <div class="layui-input-inline st">
            <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                <i class="layui-icon layui-icon-upload"></i> 上传头像
            </button>
            <div style="width: 132px;">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                    <div id="ID-upload-demo-text"></div>
                    <input type="text" name="avatar" class="layui-input layui-hide" id="avatar">
                </div>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>

    </div>
    <!--  手机号码  -->
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">基本信息备注</label>
        <div class="layui-input-inline st">
            <textarea name="remark" placeholder="请输入基本信息备注" lay-verify="required" class="layui-textarea" ></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">职称<span class="xinghao">*</span></label>
        <div class="layui-input-inline st">
            <input type="text" name="professional" lay-verify="required|professional" placeholder="请输入基本信息备注" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--    上传图片-->
    <div class="layui-form-item">
        <label class="layui-form-label">资格证<span class="xinghao">*</span></label>
        <div class="layui-input-inline st">
            <button type="button" class="layui-btn" id="ID-upload-demo-btn1">
                <i class="layui-icon layui-icon-upload"></i> 上传资格证
            </button>
            <div style="width: 132px;">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="ID-upload-demo-img1" style="width: 100%; height: 92px;">
                    <div id="ID-upload-demo-text1" ></div>
                    <input type="text" id="certificate" class="layui-input layui-hide" name="certificate">
                </div>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo1">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>

    </div>
    <!--  手机号码  -->
    <div class="layui-form-item">
        <label class="layui-form-label">医生类型</label>
        <div class="layui-input-inline">
            <select name="doctorType" lay-verify="required" lay-search>
                <option value="">请选择医生类型</option>
                <option value="1">普通医生</option>
                <option value="2">特权医生</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">科室<span class="xinghao">*</span></label>
        <div class="layui-input-inline st">
            <input type="text" name="department" lay-verify="required|department" placeholder="请输入科室" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--  手机号码  -->
    <div class="layui-form-item">
        <label class="layui-form-label">从医经验<span class="xinghao">*</span></label>
        <div class="layui-input-inline st">
            <input type="text" name="medicalExperience" lay-verify="required|medicalExperience" placeholder="请输入从医经验" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--  提交 -->
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
    </div>
</div>

<script src="../../../layui/layui.js"></script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#datetimePicker',
            type: 'datetime'
        });
    });
    layui.config({
        base: '../../../layui/layuiAdmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'layer', 'form','layedit','laydate'], function(){
        var $ = layui.$
            ,form = layui.form
            ,layer = layui.layer
            ,laydate = layui.laydate
            ,layedit = layui.layedit;

        //常规用法
        laydate.render({
            elem: '#hiredate'
        });
        layui.use(function() {
            var upload = layui.upload;
            var layer = layui.layer;
            var element = layui.element;
            var $ = layui.$;
            // 单图片上传
            var uploadInst = upload.render({
                elem: '#ID-upload-demo-btn',
                url: 'http://localhost:8888/show/file/upload', // 实际使用时改成您自己的上传接口即可。
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    });

                    element.progress('filter-demo', '0%'); // 进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                },
                done: function (res) {
                    // 若上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    // 上传成功的一些操作
                    console.log(res.data)
                    $('#avatar').val(res.data)

                    document.getElementById("ID-upload-demo-img1").value = res.data;
                    $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                },
                error: function () {
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function (n, elem, e) {
                    element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
        })


        layui.use(function() {
            var upload = layui.upload;
            var layer = layui.layer;
            var element = layui.element;
            var $ = layui.$;
            // 单图片上传
            var uploadInst = upload.render({
                elem: '#ID-upload-demo-btn1',
                url: 'http://localhost:8888/show/file/upload', // 实际使用时改成您自己的上传接口即可。
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#ID-upload-demo-img1').attr('src', result); // 图片链接（base64）
                    });

                    element.progress('filter-demo', '0%'); // 进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                },
                done: function (res) {
                    // 若上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    // 上传成功的一些操作
                    console.log(res.data)
                    $('#certificate').val(res.data)

                    $('#ID-upload-demo-text1').html(''); // 置空上传失败的状态
                },
                error: function () {
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text1');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function (n, elem, e) {
                    element.progress('filter-demo1', n + '%'); // 可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
        })
        //常规用法
        laydate.render({
            elem: '#hiredate'
        });

        // 通过后端动态获取下拉数据
        $.ajax({
            url:"http://localhost:8888/sys_hospital/findSysHospitals",
            type:"get",
            dataType:"json",
            success:function (res){
                // 后端获取部门数据
                var selectData = res.data;
                // 清空列表
                $("#hospitalSelect").empty();
                // 默认的
                $("#hospitalSelect").append(new Option('-请选择所属医院-',''));
                // 循环遍历
                $.each(selectData,function (index,item){
                    $("#hospitalSelect").append(new Option(item.hospitalName,item.hospitalId));
                })
                form.render('select'); // 更新渲染
            }
        })
        form.verify({
            doctorName:function (value){
                if (value==null){
                    return  '医生姓名不为空'
                }
                if(value.length<2){
                    return '姓名至少两个字';
                }
                if(value.length>10){
                    return '姓名最多十个字';
                }
            },
            // doctorPhone:function (value){
            //     var reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
            //     if (value==null){
            //         return  '医生手机号不为空'
            //     }
            //     if(!reg.test(value)){
            //         return '手机号格式不符合';
            //     }
            // },
            department:function (value){
                if (value==null){
                    return  '科室不为空'
                }
            },
            professional:function (value){
                if (value==null){
                    return  '科室不为空'
                }
            },
            medicalExperience:function (value){
                if (value==null){
                    return  '科室不为空'
                }
            },
        });

    })
</script>
</body>
</html>